<script setup lang="ts">
import DinePrintConfigForm from './DinePrintConfigForm.vue'
import { checkRole } from '@/utils/permission'
import * as DinePrintConfigApi from '@/api/dine/print/DinePrintConfigApi'

defineComponent({
  name: 'DinePrintConfigList'
})

const tableData = reactive({
  total: 0,
  loading: true,
  list: [],
  searchParam: {
    pageNo: 1,
    pageSize: 10,
    createTime: []
  }
})

const loadConfigData = async () => {
  tableData.loading = true
  try {
    const res = await DinePrintConfigApi.getPage({
      ...tableData.searchParam
    })
    tableData.list = res.list
    tableData.total = res.total
  } finally {
    tableData.loading = false
  }
}

onMounted(async () => {
  if (checkRole(['shop_admin'])) {
    return
  }
  tableData.searchParam.pageNo = 1
  await loadConfigData()
})
</script>

<template>
  <ContentWrap>
    <DinePrintConfigForm v-hasRole="['shop_admin']" />
    <el-table
      v-hasRole="['super_admin', 'platform_admin', 'tenant_admin']"
      :data="tableData.list"
      size="large"
      v-loading="tableData.loading"
    >
      <template #empty>
        <span>{{ !tableData.loading ? '没有相关数据' : '' }}</span>
      </template>
      <el-table-column
        v-hasRole="['super_admin', 'platform_admin', 'tenant_admin']"
        label="所属店铺"
        min-width="150"
      >
        <template #default="{ row }">
          <div>{{ row.shop?.name || row.shopId }}</div>
        </template>
      </el-table-column>
      <el-table-column label="厂商" min-width="100">
        <template #default="{ row }">
          <div>{{ row.supplyTypeName }}</div>
        </template>
      </el-table-column>
      <el-table-column label="打印机名称" min-width="100">
        <template #default="{ row }">
          <div>{{ row.printerName }}</div>
        </template>
      </el-table-column>
      <el-table-column label="打印机唯一标识" min-width="100">
        <template #default="{ row }">
          <div>{{ row.printerSn }}</div>
        </template>
      </el-table-column>
      <el-table-column label="打印机秘钥" min-width="100">
        <template #default="{ row }">
          <div>{{ row.printerKey }}</div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-model:limit="tableData.searchParam.pageSize"
      v-model:page="tableData.searchParam.pageNo"
      :total="tableData.total"
      @pagination="loadConfigData"
    />
  </ContentWrap>
</template>
